// mine/pages/animation/demo2/sharePIc/index.ts
import drawQrcode from '../../../../../utils/weapp.qrcode'
Page({

    /**
     * 页面的初始数据
     */
    data: {
        show: false,
        propic: '',
        avatar: '',
        cardW: 0,
        cardH: 0,
        preurl: "", //图片路径
    },

    onLoad() {
        this.setData({
            propic: './shareImg.png',
            avatar: './avatar.png',
            cardW: 750,
            cardH: 1046
        })
    },
    // 点击分享按钮
    sharePic() {
        this.setData({
            show: true
        })
        setTimeout(() => {
            //弹出框打开后调用canvas进行绘画，至关重要这一步**
            this.drawQRcode()
        }, 500)
    },
    // 生成二维码
    drawQRcode() {
        const that = this;
        drawQrcode({
            width: this.createRpx2px(256),
            height: this.createRpx2px(256),
            canvasId: 'myQrcode',
            text: 'https://backend.kindstaryouyi.com/',  //扫描跳转路径
            callback() {
                wx.canvasToTempFilePath({
                    x: 0,
                    y: 0,
                    width: that.createRpx2px(256),
                    height: that.createRpx2px(256),
                    destWidth: that.createRpx2px(300),
                    destHeight: that.createRpx2px(300),
                    canvasId: 'myQrcode',
                    success: function (res) {
                        let filePath = res.tempFilePath;
                        console.log(res.tempFilePath)
                        // 绘画图片
                        that.drawCanvas(filePath)
                    },
                    fail: function () {
                        console.log('hsdkfjk')
                    }
                })
            }
        })
    },
    // 转化单位进制
    createRpx2px(rpx: number) {
        return wx.getSystemInfoSync().windowWidth / 750 * rpx
    },
    // 绘画图片
    drawCanvas(filePath: any) {
        let that = this
        // 获取绘图上下文对象
        let ctx = wx.createCanvasContext('firstCanvas')
        ctx.drawImage(that.data.propic, 0, 0, this.createRpx2px(this.data.cardW), this.createRpx2px(this.data.cardH))

        ctx.beginPath();
        ctx.strokeStyle = "#FFFFFF";
        ctx.arc(this.createRpx2px(376), this.createRpx2px(128), this.createRpx2px(76), 0, 2 * Math.PI)
        ctx.stroke();
        ctx.fillStyle = "#FFFFFF";
        ctx.fill()

        ctx.save()
        ctx.beginPath();
        ctx.strokeStyle = "#FFFFFF";
        ctx.arc(this.createRpx2px(376), this.createRpx2px(130), this.createRpx2px(60), 0, 2 * Math.PI)
        ctx.stroke();
        ctx.fillStyle = "#CCF0FF";
        ctx.fill()
        ctx.clip();  //路径剪裁
        ctx.drawImage(that.data.avatar, this.createRpx2px(316), this.createRpx2px(70), this.createRpx2px(120), this.createRpx2px(120))
        ctx.restore()

        ctx.beginPath();
        ctx.setFontSize(24)
        ctx.setFillStyle("#000000")
        ctx.fillText('阿科贝', this.createRpx2px(200), this.createRpx2px(250));

        ctx.beginPath();
        ctx.strokeStyle = "#30CAC7";
        ctx.moveTo(this.createRpx2px(374), this.createRpx2px(210))
        ctx.lineTo(this.createRpx2px(542), this.createRpx2px(210))
        ctx.arcTo(this.createRpx2px(542), this.createRpx2px(210), this.createRpx2px(542), this.createRpx2px(260), this.createRpx2px(25));
        // ctx.lineTo(this.createRpx2px(374), this.createRpx2px(260))
        ctx.stroke();
        // ctx.rect(this.createRpx2px(374), this.createRpx2px(210), this.createRpx2px(168), this.createRpx2px(50))

        // this.arcRect(ctx, this.createRpx2px(374), this.createRpx2px(210), this.createRpx2px(168), this.createRpx2px(50), this.createRpx2px(20))
        ctx.stroke();
        // ctx.setFontSize(14)
        // ctx.setFillStyle("#30CAC7")
        // ctx.fillText('副主任医师', this.createRpx2px(390), this.createRpx2px(245));
        // this.arcRect(ctx, this.createRpx2px(374), this.createRpx2px(210), this.createRpx2px(168), this.createRpx2px(50), this.createRpx2px(20))  //圆角矩形
        // ctx.fillStyle = '#30CAC7';  //填充颜色
        // ctx.fill();  //填充路径


        let imgX = (that.data.cardW - 256) / 2
        ctx.drawImage(filePath, this.createRpx2px(imgX), this.createRpx2px(346), this.createRpx2px(256), this.createRpx2px(256))

        ctx.beginPath();
        ctx.setFontSize(14)
        ctx.setFillStyle("#666666")
        ctx.setTextAlign('center')  //文字居中
        let textX = that.data.cardW / 2
        ctx.fillText('你好，我是（医生名字），你可以在康圣友医', this.createRpx2px(textX), this.createRpx2px(666 + 20), this.createRpx2px(580));
        ctx.fillText('关注我。关注后，可以在微信上查看我的信息，', this.createRpx2px(textX), this.createRpx2px(666 + 20 + 40), this.createRpx2px(566));
        ctx.fillText('很方便地给我发消息和反馈疗效。', this.createRpx2px(textX), this.createRpx2px(666 + 20 + 40 + 40), this.createRpx2px(566));
        ctx.draw()
    },

    //绘画圆角矩形
    //入参说明：上下文、左上角X坐标，左上角Y坐标，宽，高，圆角的半径
    arcRect(ctx: any, x: any, y: any, w: any, h: any, r: any) {
        // 右上角弧线
        ctx.moveTo(x + r, y);
        // 前两个参数是控制点，三四个参数是结束点，最后一个是半径
        ctx.arcTo(x + w, y, x + w, y + r, r);

        // 右下角弧线
        ctx.arcTo(x + w, y + h, x + w - r, y + h, r);

        // 左下角弧线
        ctx.arcTo(x, y + h, x, y + h - r, r);

        // 左上角弧线
        ctx.arcTo(x, y, x + r, y, r);
    },
    // 点击保存图片
    savePic() {
        let that = this
        console.log('dsfsd')
        // 生成加载中
        wx.showLoading({
            title: '努力生成中...'
        })
        wx.canvasToTempFilePath({
            x: 0,
            y: 0,
            width: this.createRpx2px(that.data.cardW),
            height: this.createRpx2px(that.data.cardH),
            canvasId: 'firstCanvas',
            success: function (res) {
                console.log(res.tempFilePath)
                that.setData({
                    preurl: res.tempFilePath,
                })
                setTimeout(() => {
                    that.saveQrcode()
                }, 200);
            },
            fail: function () {
                console.log('hhh')
                // 如果生成图片失败，也会停止加载
                wx.hideLoading()
            }
        })
    },
    // 准备存储图片
    saveQrcode() {
        const that = this;
        // 获取手机权限
        wx.getSetting({
            success: (res) => {
                if (!res.authSetting['scope.writePhotosAlbum']) {
                    // 如果之前没有开启存储到相册的权限，就请求权限
                    wx.authorize({
                        scope: 'scope.writePhotosAlbum',
                        success: (res) => {
                            wx.hideLoading()
                            this.eventSave()
                        },
                        fail: err => {
                            wx.hideLoading()
                            if (err.errMsg.includes('authorize:fail')) {
                                // 重新打开相册权限
                                wx.openSetting({
                                    success(settingdata) {
                                        if (settingdata.authSetting['scope.writePhotosAlbum']) {
                                            // 获取权限成功，给出再次点击图片保存到相册的提示
                                            that.eventSave()
                                        } else {
                                            // 获取权限失败，给出不给权限就无法正常使用的提示
                                        }
                                    },
                                    // 打开权限失败，目前小程序无法在用户未操作的情况下，打开设置页
                                    fail() {
                                        wx.showToast({
                                            icon: "none",
                                            title: "授权失败！请打开小程序-设置，打开存储相册权限"
                                        })
                                    }
                                })
                            }
                        }
                    })
                } else {
                    this.eventSave();
                    wx.hideLoading()
                }
            }
        })
    },
    // 保存图片到相册
    eventSave() {
        let that = this
        wx.saveImageToPhotosAlbum({
            filePath: that.data.preurl,
            success(res) {
                wx.showToast({
                    title: '保存图片成功',
                    icon: 'success',
                    duration: 2000
                })
            }
        })
    },

    // 关闭弹出层
    onClose() {
        this.setData({ show: false });
    },
    // 弹出层-点击保存按钮
    saveP() {

    },
    // 弹出层-点击分享按钮
    shareP() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }
})